<template>
  <div class="marketing-coupon-container">
    <div style="padding: 10px 10px">
      <el-button type="primary" size="small" style="padding:8px 30px;" @click="disConfig = true">配 置</el-button>
    </div>

    <!-- 表格 -->
    <el-tabs v-model="type">
      <el-tab-pane label="店铺红包" name="1">
        <shop-packet :couponList="couponList" type="1" @updata="getCouponList" @search="search"/>
      </el-tab-pane>
      <el-tab-pane label="新人红包" name="2">
        <shop-packet :couponList="couponList" type="2" @updata="getCouponList" @search="search"/>
      </el-tab-pane>
      <el-tab-pane label="拼手气红包" name="3">
        <shop-packet :couponList="couponList" type="3" @updata="getCouponList" @search="search"/>
      </el-tab-pane>
      <!--<el-tab-pane label="类目红包" name="4">
        <shop-packet :couponList="couponList" type="4" @updata="getCouponList" @search="search"/>
      </el-tab-pane>-->
      <el-tab-pane label="商品红包" name="5">
        <shop-packet :couponList="couponList" type="5" @updata="getCouponList" @search="search"/>
      </el-tab-pane>
      <el-tab-pane label="签到专用" name="9">
        <shop-packet :couponList="couponList" type="9" @updata="getCouponList" @search="search"/>
      </el-tab-pane>
      <el-tab-pane label="打包发放优惠券" name="10">
        <Packagegrant type="10"/>
      </el-tab-pane>
    </el-tabs>

    <!-- 分页 -->
    <div v-show='type != 10' style="text-align:right;margin:15px 15px">
      <el-pagination class="page"
        background
        layout="total, prev, pager, next, jumper"
        :total="count"
        :page-size="10"
        :current-page="page"
        @size-change="changePage"
        @current-change="changePage">
      </el-pagination>
    </div>

    <el-dialog :visible.sync="disConfig" width="30%" title="配置">
      <coupon-config @success="disConfig = false"/>
    </el-dialog>
  </div>
</template>

<script>
import { getCouponList } from '@/api/marketing'
import { ShopPacket, CouponConfig, Packagegrant } from './components'
// import mixin from './components/mixin'

export default {
  name: 'coupon',
  // mixins: [mixin],
  components: {
    ShopPacket,
    CouponConfig,
    Packagegrant
  },  
  data() {
    return {
      page: 1,
      count: 1,
      type: '1',
      couponList: [],

      disConfig: false
    }
  },
  watch: {
    type() {
      this.page = 1;
      this.getCouponList();
    }
  },
  mounted() {
    this.getCouponList();
  },
  methods: {
    /**
     * 获取优惠券列表
     */
    getCouponList() {
      const params = {
        key: this.$store.state.app.activeApp.saa_key,
        type: this.type,
        page: this.page,
        limit: 10
      };

      getCouponList(params).then(res => {
        if(res.status === 200) {
          this.couponList = res.data;
          this.count = parseInt(res.count);
        }else if(res.status === 204) {
          this.couponList = [],
          this.count = 1;
        }else{
          this.$message.error(res.message);
        }
      })
    },
    /**
     * 翻页
     */
    changePage(page) {
      this.page = page;
      this.getCouponList();
    },
    /**
     * 搜索
     */
    search(searchName) {
      const params = {
        key: this.$store.state.app.activeApp.saa_key,
        page: 1,
        limit: 10,
        type: this.type,
        searchName: searchName
      }

      getCouponList(params).then(res => {
        if(res.status === 200) {
          this.couponList = res.data;
          this.count = parseInt(res.count);
        }else if(res.status === 204) {
          this.couponList = [],
          this.count = 1;
        }else{
          this.$message.error(res.message);
        }
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.marketing-coupon-container{
  min-height: calc(100vh - 100px);
  margin: 20px;
  background-color: #fff;
  padding:25px;
  box-shadow: 0px 0px 4px 0px rgba(115, 115, 115, 0.2);
} 
.coupon-packet-container{
  padding: 20px 0;
}
.coupon-packet-row{
  margin: 15px 0;
  text-align: center;
  height: 40px;
  line-height: 40px;
  &-col{
    padding: 0 15px;
    max-width: 95%;
    overflow: hidden;
    display: flex;
  }
}
</style>